import React from 'react'
import {connect} from 'react-redux'
import BasicInfo from 'components/basic-info';
import {messages} from 'share/common';
import { Tabs, Affix, Button } from 'antd';
import Condition from 'components/condition';
import 'styles/setting/wait-for-billing/invoice-status-query.scss';
import HeaderStyle from 'containers/financial-account/credential-definition/header-style';
import RowStyle from 'containers/financial-account/credential-definition/row-style';
import menuRoute from 'routes/menuRoute';
const TabPane = Tabs.TabPane;
const If = Condition.If;

class credentialDetail extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      infoList: [
        {type: 'input', id: 'templateCode', label: messages('financial-account.key1')/*凭证类别编码*/},
        {type: 'input', id: 'templateName', label: messages('financial-account.key2')/*凭证类别名称*/},
        {type: 'input', id: 'functionDefineCode', label: messages('financial-account.key4')/*来源核算业务类型编码*/},
        {type: 'switch', id: 'isDefault', label: messages('financial-account.key5')/*是否预置*/},
        {type: 'switch', id: 'isEnable', label: messages('common.column.status')/*状态*/},
      ],
      infoData: {},
      status: 'header',
      tabs: [
        {name: messages('financial-account.key10')/*凭证模板头样式*/, key: 'header'},
        {name: messages('financial-account.key11')/*凭证模板行样式*/, key: 'row'}
      ]
    }
  }

  componentWillMount() {
    this.setState({infoData: this.props.credentialDefinition});
  }

  onChangeTabs = (key) => {
    this.setState({status: key});
  };

  goBack = () => {
    this.context.router.push(menuRoute.getRouteItem('credential-definition').url);
  };

  render(){
    const { infoList, infoData, status, tabs } = this.state;
    return(
      <div className="invoice-status">
        <div style={{paddingBottom: '20px'}}>
          <BasicInfo infoList={infoList}
                     infoData={infoData}
                     isHideEditBtn={true}/>
        </div>
        <div style={{height: '20px', margin: '0px -20px', backgroundColor: '#f0f2f5'}}/>
        <Tabs type="card" onChange={this.onChangeTabs} defaultActiveKey={status} style={{marginTop: '20px'}}>
          {
            tabs.map(item => {
              return <TabPane tab={item.name} key={item.key}/>;
            })
          }
        </Tabs>
        <If value={status === 'header'}>
          <HeaderStyle infoData={infoData}/>
        </If>
        <If value={status === 'row'}>
          <RowStyle infoData={infoData}/>
        </If>
        <Affix offsetBottom={0} className="bottom-bar">
          <Button onClick={this.goBack}>{messages('common.back')/*返回*/}</Button>
        </Affix>
      </div>
    )
  }
}

credentialDetail.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state){
  return {
    credentialDefinition: state.financialAccount.credentialDefinition
  }
}

export default connect(mapStateToProps)(credentialDetail);
